<template>
  <div class="container">
    <h1 class="title">todos</h1>
    <div class="warp">
      <HeaderSearch />
      <main>
        <DataList />
      </main>
      <TabFilter />
    </div>
      <div class="info" ref="info">
        <p>Double-click to edit a todo</p>
        <p>Written by <a href="http://evanyou.me">Evan You</a></p>
        <p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
    </div>
    
  </div>
</template>
<script>
import HeaderSearch from "@/components/header-search"
import DataList from "@/components/data-list"
import TabFilter from "@/components/tab-filter"
export default {
  components:{
    HeaderSearch,
    DataList,
    TabFilter
  },
  created(){
    this.$store.dispatch('setList')
  }
 
}
</script>
<style lang="scss" scoped>
.container {
  background-color: #f5f5f5;
  min-width: 230px;
  max-width: 550px;
  margin: 0 auto;
  .title {
    text-align: center;
    font-size: 100px;
    font-weight: 100;
  }
}
.warp {
  background: #fff;
  position: relative;
  box-shadow: 0 2px 4px 0 rgb(0 0 0 / 20%), 0 25px 50px 0 rgb(0 0 0 / 10%);

}
.info {
	margin: 65px auto 0;
	color: #bfbfbf;
	font-size: 10px;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
	text-align: center;
}

.info p {
	line-height: 1;
}

.info a {
	color: inherit;
	text-decoration: none;
	font-weight: 400;
}

.info a:hover {
	text-decoration: underline;
}

</style>